<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" href="/favicon.ico" />
  <link rel="stylesheet" href="/iconfont.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Silky-Dashboard</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/Sortable/1.13.0/Sortable.js"></script>
  <script>
    window.process = {};
    window.authApi = "%(authApi)";
    window.useAuth = "%(useAuth)";
    window.wrapperResponse = "%(wrapperResponse)";
  </script>
</head>

<body>
  <div id="app">
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      html,
      body {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #000;
        overflow: hidden;
        font-family: "Reggae One", cursive;
      }

      p {
        font-size: 12vw;
        overflow: hidden;
        -webkit-text-stroke: 3px #7272a5;
      }

      p::before {
        content: " ";
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background-image: linear-gradient(45deg, #ff269b, #2ab5f5, #ffbf00);
        mix-blend-mode: multiply;
      }

      p::after {
        content: "";
        background: radial-gradient(circle, #fff, #000 50%);
        background-size: 25% 25%;
        position: absolute;
        top: -100%;
        left: -100%;
        right: 0;
        bottom: 0;
        mix-blend-mode: color-dodge;
        animation: mix 2s linear infinite;
      }

      @keyframes mix {
        to {
          transform: translate(50%, 50%);
        }
      }
    </style>
    <!-- <div class="g-container">
        <p>Silky-Dashboard</p>
      </div> -->
  </div>
  <script type="module" src="/src/main.ts"></script>
</body>

</html>
